﻿<UserControl x:Class="EmperialApps.WeatherSpark.DisplaySelector"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:EmperialApps.WeatherSpark"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignWidth="300">
    <UserControl.Resources>
        <Style TargetType="local:DisplaySelectorSlider">
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="BorderBrush"
                    Value="Transparent" />
            <Setter Property="Margin"
                    Value="36,0" />
            <Setter Property="Minimum"
                    Value="0" />
            <Setter Property="Maximum"
                    Value="2" />
            <Setter Property="Value"
                    Value="0" />
            <Setter Property="SmallChange"
                    Value="1" />
            <Setter Property="Background"
                    Value="{StaticResource PhoneContrastBackgroundBrush}" />
            <Setter Property="Foreground"
                    Value="{StaticResource PhoneAccentBrush}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Background="Transparent">
                            <Grid.Resources>
                                <Style x:Key="BaseShapeStyle"
                                       TargetType="Shape">
                                    <Setter Property="IsHitTestVisible"
                                            Value="False" />
                                    <Setter Property="VerticalAlignment"
                                            Value="Center" />
                                </Style>

                                <Style x:Key="TrackStyle"
                                       BasedOn="{StaticResource BaseShapeStyle}"
                                       TargetType="Rectangle">
                                    <Setter Property="Stretch"
                                            Value="Fill" />
                                    <Setter Property="Margin"
                                            Value="16" />
                                    <Setter Property="Height"
                                            Value="14" />
                                    <Setter Property="RadiusX"
                                            Value="7" />
                                    <Setter Property="RadiusY"
                                            Value="7" />
                                </Style>

                                <Style x:Key="BaseEllipseStyle"
                                       BasedOn="{StaticResource BaseShapeStyle}"
                                       TargetType="Ellipse">
                                    <Setter Property="Width"
                                            Value="32" />
                                    <Setter Property="Height"
                                            Value="32" />
                                </Style>

                                <Style x:Key="NodeStyle"
                                       BasedOn="{StaticResource BaseEllipseStyle}"
                                       TargetType="Ellipse">
                                    <Setter Property="Stroke"
                                            Value="Transparent" />
                                    <Setter Property="StrokeThickness"
                                            Value="6" />
                                </Style>

                                <Style x:Key="TransparencyBlockerStyle"
                                       BasedOn="{StaticResource BaseEllipseStyle}"
                                       TargetType="Ellipse">
                                    <Setter Property="Stroke"
                                            Value="Transparent" />
                                    <Setter Property="StrokeThickness"
                                            Value="6.5" />
                                    <Setter Property="Fill"
                                            Value="{StaticResource PhoneBackgroundBrush}" />
                                </Style>

                                <Style x:Key="ThumbStyle"
                                       BasedOn="{StaticResource BaseEllipseStyle}"
                                       TargetType="Ellipse">
                                    <Setter Property="HorizontalAlignment"
                                            Value="Center" />
                                    <Setter Property="Stroke"
                                            Value="{StaticResource PhoneBackgroundBrush}" />
                                    <Setter Property="StrokeThickness"
                                            Value="{StaticResource PhoneStrokeThickness}" />
                                </Style>

                                <local:OpacityMaskConverter x:Key="LimitMask" />
                                <local:LimitVisibilityConverter x:Key="LimitVisibility" />
                            </Grid.Resources>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTemplate"
                                                                           Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0.25" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalFill"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalCenterElement"
                                                                           Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid x:Name="HorizontalTemplate"
                                  Margin="{StaticResource PhoneHorizontalMargin}">
                                <Rectangle Style="{StaticResource TrackStyle}"
                                           x:Name="HorizontalTrack"
                                           Fill="{StaticResource PhoneForegroundBrush}"
                                           Opacity="0.75"
                                           OpacityMask="{Binding SmallChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource LimitMask}}" />
                                <Rectangle Style="{StaticResource TrackStyle}"
                                           x:Name="HorizontalFill"
                                           Fill="{TemplateBinding Foreground}">
                                    <Shape.Clip>
                                        <RectangleGeometry Rect="-16, 0, 0, 14" />
                                    </Shape.Clip>
                                </Rectangle>

                                <Ellipse Style="{StaticResource TransparencyBlockerStyle}" />
                                <Ellipse Style="{StaticResource NodeStyle}"
                                         Fill="{StaticResource PhoneForegroundBrush}"
                                         Opacity="0.75" />
                                <Ellipse Style="{StaticResource NodeStyle}"
                                         Fill="{StaticResource PhoneAccentBrush}"
                                         Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, Converter={StaticResource LimitVisibility}}" />

                                <Ellipse Style="{StaticResource TransparencyBlockerStyle}"
                                         HorizontalAlignment="Right"
                                         Visibility="{Binding SmallChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource LimitVisibility}}" />
                                <Ellipse Style="{StaticResource NodeStyle}"
                                         Fill="{StaticResource PhoneForegroundBrush}"
                                         Opacity="0.75"
                                         HorizontalAlignment="Right"
                                         Visibility="{Binding SmallChange, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource LimitVisibility}}" />

                                <Ellipse x:Name="HorizontalCenterElement"
                                         Style="{StaticResource ThumbStyle}"
                                         Fill="{StaticResource PhoneForegroundBrush}"
                                         HorizontalAlignment="Left">
                                    <Shape.RenderTransform>
                                        <TranslateTransform />
                                    </Shape.RenderTransform>
                                </Ellipse>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <local:DisplaySelectorSlider x:Name="Selector" />
    </Grid>
</UserControl>
